import React from 'react';
import { motion } from 'framer-motion';
import { 
  Box, 
  Factory, 
  Eye, 
  Zap, 
  Shield, 
  Layers,
  Sparkles,
  Network
} from 'lucide-react';
import { PatternCardProps } from '@/types';

const patternIcons = {
  Box,
  Factory,
  Eye,
  Zap,
  Shield,
  Layers,
  Sparkles,
  Network
};

const difficultyColors = {
  '简单': 'text-green-600 bg-green-100',
  '中等': 'text-yellow-600 bg-yellow-100', 
  '困难': 'text-red-600 bg-red-100'
};

const PatternCard: React.FC<PatternCardProps> = ({ 
  pattern, 
  isActive, 
  onClick 
}) => {
  const Icon = patternIcons[pattern.icon as keyof typeof patternIcons] || Box;
  
  return (
    <motion.div
      onClick={() => onClick(pattern)}
      className={`relative p-3 rounded-lg cursor-pointer transition-all duration-200 ${
        isActive 
          ? 'bg-blue-100 border-2 border-blue-300 shadow-sm' 
          : 'bg-white hover:bg-gray-50 border-2 border-transparent hover:border-gray-200'
      }`}
      whileHover={{ scale: 1.01 }}
      whileTap={{ scale: 0.99 }}
    >
      <div className="flex items-center space-x-3">
        <div className={`p-2 rounded-lg ${
          isActive ? 'bg-blue-200' : 'bg-gray-100'
        }`}>
          <Icon className={`w-4 h-4 ${
            isActive ? 'text-blue-700' : 'text-gray-600'
          }`} />
        </div>
        
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between">
            <h3 className={`font-medium text-sm truncate ${
              isActive ? 'text-blue-900' : 'text-gray-900'
            }`}>
              {pattern.name}
            </h3>
            
            <span className={`text-xs px-2 py-0.5 rounded-full ml-2 ${
              difficultyColors[pattern.difficulty]
            }`}>
              {pattern.difficulty}
            </span>
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default PatternCard;
